<template>
  <div class="table-page lf flex-col">
    <div class="balance-box flex-col m-relative flex-j-c">
      <div class="text-theme text-underline cursor-pointer m-absolute r-24 t-20" @click="onBill">查看账单></div>
      <div class="text999 pl-4">可提现余额</div>
      <span class="text000 text-size-24 mt-10">￥{{ userInfoData?.balance ?? 0 }}</span>
    </div>
    <div class="flex-col mt-14n">
      <span>提现金额：</span>
      <div class="withdrawal-box flex flex-a-c mt-m px-18">
        <span>￥</span>
        <a-input-number
          v-model="amount"
          class="flex-1 mx-m h-full"
          style="font-size: 30px"
          :min="1"
          :max="Number(userInfoData.balance)"
          :placeholder="!userInfoData.balance || userInfoData.balance <= 0 ? '暂无可提现余额' : '请输入提现金额'"
          :disabled="!userInfoData.balance || userInfoData.balance <= 0"
        ></a-input-number>
        <span class="text-theme cursor-pointer text-size-16 font-weight-500" @click="allAmount">全部</span>
      </div>
    </div>
    <div class="flex-col mt-14n">
      <span>提现账号：</span>
      <div class="box flex flex-a-c mt-m m-relative" v-if="userInfoData.account">
        <icon-alipay-circle style="color: #1478f7" size="40" />
        <div class="flex-col ml-m">
          <span>支付宝</span>
          <span class="mt-2">姓名：{{ userInfoData.alipayName }}</span>
          <span class="mt-2">账号：{{ userInfoData.account }}</span>
        </div>
        <a-button type="outline" shape="round" size="mini" class="m-absolute r-20 t-10" @click="onSet">修改</a-button>
      </div>
      <div class="box flex flex-a-c mt-m m-relative" v-else>
        <icon-question-circle-fill style="color: #e5e5e5" size="40" />
        <span class="ml-10">还未设置提现账号</span>
        <a-button type="outline" shape="round" size="mini" class="m-absolute r-20 t-10" @click="onSet">设置</a-button>
      </div>
    </div>
    <div class="mt-14n">
      <a-button
        :disabled="!userInfoData.balance || userInfoData.balance <= 0 || !userInfoData.account"
        :loading="loading"
        style="width: 204px; height: 48px; border-radius: 24px"
        type="primary"
        size="large"
        @click="onSubmit"
        >提现申请</a-button
      >
    </div>
  </div>
</template>
<script setup>
import { withdrawalBasicInfo, withdrawalApply } from '@/apis'
import { Message } from '@arco-design/web-vue'
import AccountSetting from './AccountSetting.vue'
import { useLayer } from '@/hooks'

defineOptions({ name: 'channelWithdrawal' })

const router = useRouter()
const userInfoData = ref({})
const amount = ref()
const getInfo = async () => {
  const res = await withdrawalBasicInfo()
  userInfoData.value = res.data
}
const loading = ref(false)
const onBill = () => {
  router.push({
    path: '/setting/channelSetting',
    query: { tab: 'BillLog' }
  })
}

const allAmount = async () => {
  if (userInfoData.value.balance && userInfoData.value.balance > 0) amount.value = Number(userInfoData.value.balance)
  else Message.error('暂无可提现余额')
}

const onSubmit = async () => {
  try {
    loading.value = true
    if (!amount.value) Message.warning('请输入提现金额')
    await withdrawalApply({ amount: amount.value, type: 1 })
    Message.success('操作成功')
    getInfo()
  } finally {
    loading.value = false
  }
}

const onSet = () => {
  useLayer().openLayer(
    AccountSetting,
    {
      title: `${userInfoData.value.account ? '修改' : '设置'}提现账号（支付宝）`,
      params: { userInfoData: userInfoData.value },
      area: ['500px', '400px']
    },
    getInfo
  )
}

onMounted(() => {
  getInfo()
})
</script>
<style scoped lang="scss">
.table-page {
  background: transparent;
  margin: 0;
}
.balance-box {
  width: 270px;
  height: 103px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  font-size: 14px;
  padding-left: 20px;
}
.withdrawal-box {
  width: 700px;
  height: 50px;
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  font-size: 30px;
  border: rgba(166, 166, 166, 1) solid 1px;
  font-weight: bold;
  :deep(.arco-input-wrapper) {
    border: none !important;
    .arco-input-size-medium {
      font-size: 30px !important;
    }
  }
}

.box {
  border-radius: 5px;
  font-size: 14px;
  background-color: rgba(255, 255, 255, 1);
  padding: 20px;
  width: 316px;
}
</style>
